<script setup lang="ts">
import labelMark from '../../components/mark.vue';
import { doGetScheduleList } from '@/api/demand/arithmetic/index';
import cancelPlaning from './dialog/cancel-planing/index.vue';
import { markMap } from '../../enum';
import { searchConfig } from './config/search-config';
import { tableConfig } from './config/table-config';
import useCommon from '@/views/Demand/Arithmetic/hooks';
import type { OrderListRecord } from '@/api/demand/order/model/type';
import type { ScheduleListListInfo } from '@/api/demand/arithmetic/model/type';

const router = useRouter();

const tableRef = ref<TableRef>();

const { priorityChange, getAddedParams, jumpToMaterial, handleGetData, updateSelect } =
    useCommon(tableRef);

// 表格额外参数
const addedParams = getAddedParams('已排产');

/**
 * @: 排程相关
 */
const searchRef = ref<SearchRef>();
const orderIds = ref<string[]>([]); // 排产所需订单id
const handleSelection = (e: OrderListRecord[]) => {
    orderIds.value = e.map(item => item.orderNumber);
};

/**
 * @: 跳转到排程明细
 */
const jumpToDetail = ({ orderNumber }: OrderListRecord) => {
    router.push({
        path: '/arithmetic/scheduleDetail',
        query: { orderNumber }
    });
};

/**
 * @: 打开取消排产
 */
const cancelPlaningRef = ref<InstanceType<typeof cancelPlaning>>();
const cancel = () => {
    cancelPlaningRef.value?.open();
};
</script>

<template>
    <q-page class="arithmetic-page">
        <base-search ref="searchRef" :table-ref="tableRef" :searchConfig="searchConfig" />

        <base-table
            ref="tableRef"
            :tableConfig="tableConfig"
            :getDataFn="doGetScheduleList"
            :added-params="addedParams"
            :hide-del="true"
            :close-edit="true"
            :table-attr="{ showOverflowTooltip: false }"
            action-width="80"
            @selection-change="handleSelection"
        >
            <template #tableHeadEnd>
                <q-tip-btn
                    class="m-r-16"
                    tip-text="取消所选订单的排程，对其他所有已排产订单重新排程。"
                    :disabled="!orderIds.length"
                    @click="cancel"
                >
                    取消排产
                </q-tip-btn>
            </template>
            <!-- 物料编码 -->
            <template #itemCode="{ row }">
                <span class="link" @click="jumpToMaterial(row.itemCode)">
                    {{ row.itemCode }}
                </span>
            </template>

            <!-- 订单号 -->
            <template #orderNumber="{ row }: SlotData<ScheduleListListInfo>">
                <div class="order-number">
                    <q-tooltip :content="row.orderNumber" style="margin-right: 2px" />

                    <div class="m-l-12">
                        <label-mark
                            v-for="item in row.labels"
                            :key="item"
                            :tip-text="item"
                            :type="markMap[item].type"
                        >
                            {{ markMap[item].text }}
                        </label-mark>
                    </div>
                </div>
            </template>

            <!-- 订单优先级 -->
            <template #orderPriority="{ row }">
                <div>
                    <el-select
                        :model-value="row.orderPriority"
                        @change="val => priorityChange(val, row)"
                    >
                        <el-option v-for="item in 10" :key="item" :value="item" />
                    </el-select>
                </div>
            </template>

            <!-- 计划延期 -->
            <template #planExtension="{ row }">
                <q-tag :type="row.planExtension >= 0 ? 'error' : 'primary'">
                    {{ row.planExtension ?? '--' }}
                </q-tag>
            </template>

            <!-- 排程备注 -->
            <template #isWaitArrange="{ row }">
                <q-status :type="row.isWaitArrange ? 'error' : 'info'">
                    {{ row.isWaitArrange ? '待重排' : '--' }}
                </q-status>
            </template>

            <!-- 操作项 -->
            <template #action="{ row }">
                <el-link type="primary" @click="jumpToDetail(row)"> 排程明细 </el-link>
            </template>
        </base-table>

        <!-- 取消排产 -->
        <cancel-planing
            ref="cancelPlaningRef"
            :selectId="orderIds"
            @get-data="handleGetData"
            @update-select="updateSelect"
        />
    </q-page>
</template>

<style scoped lang="scss">
:deep(.cell.el-tooltip) {
    &:has(.link) {
        color: var(--q-color-primary);
    }
}

@include b(link) {
    cursor: pointer;
}

@include b(order-number) {
    @include flex();

    & > div {
        @include pseudo(first-child) {
            flex: 1;
        }
    }
}
</style>
